<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index page</title>
    <script src="/js/axios.min.js"></script>
    <style>

        * {
            margin: 0;
            padding: 0;
        }

        #nav {
            width: 100%;
            background: #000;
            color: #fff;
            position: fixed;
            height: 30px;
        }

        #container {
            width: 1010px;
            background: #ffe;
            padding: 40px;
            margin: auto;
            height: 2000px;
        }

        #sign {
            width: 1000px;
            margin: auto;
        }

        span {
            cursor: pointer;
            display: inline-block;
            line-height: 30px;
        }


        /*#sign_up_form,*/

        #sign_in_form,
        #avatar {
            display: none;
        }

        #avatar {
            height: 20px;
            margin: 5px;
        }

        #sign_in_button:hover,
        #sign_up_button:hover {
            background: #666;
        }

        #product-items {
            margin-right: -10px;
        }

        .product {
            width: 245px;
            height: 401px;
            float: left;
            margin: 0 10px 50px 0;
            cursor: pointer;
            text-align: center;
        }

        .product:hover {
            background: #f4f0ea;
            box-shadow: 3px 3px #888;

        }

        .product img {
            height: 245px;
            background: #fff;
        }

        .title,
        .price,
        .sub-title {
            padding: 8px 10px;
            /*margin-bottom: 8px;*/
        }

        .title {
            font-weight: bold;
        }

        .price {
            color: orangered;
        }

        .sub-title {
            color: #666;
        }

        hr {
            width: 160px;
            height: 1px;
            margin: 8px auto;
            color: #ffffee;
            border: 0;
            border-top: 1px #ddd solid;
        }

        .limit {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        /*    模态框部分*/
        #sign_up_modal {
            display: none;
            position: fixed; /* 定位属性 */
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .6);
        }

        #sign_up_content {
            width: 30%;
            margin: 20% auto;
            background: #ffffff;
        }

        #sign_up_close {
            font-size: 1.8em;
            font-weight: bolder;
            cursor: pointer;

        }
    </style>
</head>
<body>
<div id="nav">
    <img id="avatar" src="" alt="">
    <div id="sign">
        <span id="sign_up_button">sign up</span>
        <span id="sign_in_button">sign in</span>
    </div>
</div>
<div id="container">
    <div id="product-items">
        <!--        <div class="product">-->
        <!--            <img src="/static/img/test.webp" alt="">-->
        <!--            <p class="title">多孔大间距新升级，启航8A插线板</p>-->
        <!--            <p class="price">43.5</p>-->
        <!--            <hr>-->
        <!--            <p class="sub-title limit">大间距粗线芯排插，更导电更安全</p>-->
        <!--        </div>-->
    </div>
    <div id="sign_up_modal">
        <div id="sign_up_content">
            <span id="sign_up_close">&times;</span>
            <form id="sign_up_form">
                <p>member sign up</p>
                <input type="text" name="nickname" value="昵称"><br>
                <input type="email" name="email" value="tom@test.com"><br>
                <input type="text" name="telephone" value="12345678"><br>
                <input type="password" name="password" value="123"><br>
                <input type="date" name="dob" value="2000-01-01"><br>
                <!--    冷启动 -->
                <input type="checkbox" name="favorites" value="数码" checked>数码
                <input type="checkbox" name="favorites" value="服饰" checked>服饰
                <br>
                <input type="file" name="file">
                <br>
                <input type="submit" value="sign up">
            </form>
        </div>
    </div>
    <div class="form">
        <!-- todo -->
        <form id="sign_in_form">
            <p>member sign in</p>
            <input type="text" name="account" placeholder="nickname / email / telephone"><br>
            <input type="password" name="password" placeholder="password" value="123"><br>
            <input type="submit" value="sign in">
        </form>
    </div>
</div>
<script>

    const signUpModal = document.getElementById('sign_up_modal');
    const signUpClose = document.getElementById('sign_up_close')

    const signUpForm = document.getElementById('sign_up_form');
    const signInForm = document.getElementById('sign_in_form');
    const headers = {'Content-Type': 'multipart/form-data'}
    const type = {type: 'application/json'};

    const signUpButton = document.getElementById('sign_up_button');
    const signInButton = document.getElementById('sign_in_button');
    const avatar = document.getElementById('avatar');

    const sign = document.getElementById('sign');

    signUpButton.onclick = function () {
        signUpModal.style.display = 'block'
        signInForm.style.display = 'none';
    }
    signInButton.onclick = function () {
        signInForm.style.display = 'block';
        signUpForm.style.display = 'none';
    }
    signUpClose.onclick = function () {
        signUpModal.style.display = 'none';
    };
    window.onclick = function (event) {
        if (event.target == signUpModal) {
            signUpModal.style.display = 'none';
        }
    };

    signUpForm.addEventListener('submit', function (event) {
        event.preventDefault();

        let formData = new FormData(signUpForm);
        let data = Object.fromEntries(formData);
        data = {...data, favorites: JSON.stringify(formData.getAll('favorites'))};
        formData.append('member', new Blob([JSON.stringify(data)], type));

        axios.post('/member/create', formData, {headers: headers}).then(res => {
            if (res.data) {
                signUpForm.style.display = 'none';
                signInForm.style.display = 'block';
                alert('注册成功，请登录');
            }
        }).catch(err => {
            console.error(err);
        })
    })

    signInForm.addEventListener('submit', function (event) {
        event.preventDefault();

        let data = Object.fromEntries(new FormData(signInForm));

        console.log(data);

        axios.post('/member/queryByAccountAndPassword', data).then(res => {
            if (res.data) {
                console.log('success');
                signInForm.style.display = 'none';
                sign.style.display = 'none';
                avatar.style.display = 'block';
                let avatarName = res.data.avatar;
                avatar.setAttribute('src', 'http://127.0.0.1:8081/avatar/' + avatarName);
                console.log(avatar);
            } else {
                console.log('failed.');
                alert('Invalid account or password.')
            }
        }).catch(err => {
            console.error(err);
        });
    })

    axios.get('/product/queryAllRecommended').then(res => {
        console.log(res.data);
        // todo VUE
        let html = '';
        for (const p of res.data) {
            let productHtml = `
                <div class="product" id="` + p.id + `">
                    <img src="http://127.0.0.1:8081/product/` + p.picture + `" alt="">
                    <p class="title">` + p.title + `</p>
                    <p class="price">` + p.price + `</p>
                    <hr>
                    <p class="sub-title limit">` + p.subtitle + `</p>
                </div>`;
            html += productHtml;
        }
        document.getElementById('product-items').innerHTML = html;
    }).catch(err => {
        console.error(err);
    });

    // future elements 未来元素
    document.querySelector('body').addEventListener('click', function (event) {
        if (event.target.closest('.product')) { // closest 寻找“距离”点击事件最近的元素
            let id = event.target.parentElement.id;
            window.location.href = '/product/detail/' + id;  // JS 页面的跳转
        }
    });
</script>
</body>
</html>